{extend name="web/public/base" /}
{block name="header"}
<script type="text/javascript" src="__WAP__/webuploader/webuploader.html5only.js"></script>
<script type="text/javascript" src="__WAP__/webuploader/webuploader.html5only.min.js"></script>
{/block}
{block name="main"}
<section class="scrollable padder">
    <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
        <li class="active">{$title}</li>
    </ul>
    <div class="row">
        <div class="col-sm-12">
            <section class="panel panel-default">
                <header class="panel-heading font-bold">{$title}</header>
                <div class="panel-body">
                    <form id="ajaxform" action="{:url('addOredit')}" role="form" method="post" onsubmit="return false;">
                        <div class="row col-md-10">
                            <div class="row col-lg-12">
                                {if !$row_info.id}
                                <div class="form-group col-sm-6">
                                    <label>账号</label>
                                    <input type="text" name="username" class="form-control" placeholder="账号"
                                           value="{$row_info['username']|default=''}">
                                </div>
                                {/if}
                                <div class="form-group col-sm-6">
                                    <label>邮箱</label>
                                    <input type="text" name="email" class="form-control" placeholder="邮箱"
                                           value="{$row_info['email']|default=''}">
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>手机号码</label>
                                    <input type="text" name="mobile" class="form-control" placeholder="手机号码"
                                           value="{$row_info['mobile']|default=''}">
                                </div>

                                <div class="form-group col-sm-6">
                                    <label>登录密码</label>
                                    <input type="password" name="password" class="form-control" placeholder="登录密码"
                                           value="">
                                </div>

                                <div class="form-group col-sm-6">
                                    <label>头像</label>
                                    <div id="picker">
                                        <img src="{$row_info.avatar}"
                                             style="max-width:300px;height:200px;"/>
                                        <input type="hidden" name="avatar" id="avatar"
                                               value="{$row_info.avatar}"/>
                                    </div>

                                    <script type="text/javascript">
                                        var uploader = WebUploader.create({
                                            // 文件接收服务端。
                                            server: "{:url('File/uploadPicture')}",
                                            // 选择文件的按钮。可选。
                                            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                                            pick: '#picker',
                                            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                                            resize: false,
                                            accept: {
                                                extensions: 'gif,jpg,jpeg,png',
                                                mimeTypes: 'img/*'
                                            }
                                        });

                                        // 当有文件被添加进队列的时候
                                        uploader.on('fileQueued', function (file) {
                                            // layer.msg('图片' + file.id + ":" + file.name + "已被选中");
                                            uploader.upload();
                                        });
                                        // 文件上传过程中创建进度条实时显示。
                                        uploader.on('uploadProgress', function (file, percentage) {
                                            var $li = $('#' + file.id),
                                                $percent = $li.find('.progress .progress-bar');

                                            // 避免重复创建
                                            if (!$percent.length) {
                                                $percent = $('<div class="progress progress-striped active">' +
                                                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                                                    '</div>' +
                                                    '</div>').appendTo($li).find('.progress-bar');
                                            }

                                            $li.find('p.state').text('上传中');
                                            $percent.css('width', percentage * 100 + '%');
                                        });


                                        uploader.on('uploadSuccess', function (file, res) {
                                            if(res.status != 200){
                                                layer.msg(res.msg);
                                                return false;
                                            }
                                            info = res.data;
                                            var src = info.path;
                                            $("#picker img").attr("src", src);
                                            // var id = info.id;
                                            $('#avatar').val(src)
                                        });

                                        uploader.on('uploadError', function (file) {
                                            alert("上传失败");
                                        });
                                    </script>
                                </div>

                            </div>
                            <footer class="panel-footer text-right bg-light lter col-sm-12">
                                <input type="hidden" name="id" value="{$row_info.id|default=''}">
                                <button type="submit" class="btn btn-success btn-s-xs">提 交</button>
                            </footer>
                        </div>
                    </form>
                </div>
            </section>
        </div>
    </div>
</section>
{/block}
{block name="script"}
<script type="text/javascript">
    $(function () {
        $.validator.setDefaults({
            submitHandler: function () {
                ajaxSubmit();
            },
            highlight: function (element, errorClass) {
                $(element).css('border', '2px solid red');
            },
            unhighlight: function (element, errorClass) {
                $(element).css('border', '1px solid green');
            }
        });

        $('#ajaxform').validate({
            rules: {
                title: "required",
                container: "required"
            },
            messages: {
                title: "请输入文章标题",
                container: "请输入文章内容"
            }
        });
    })
</script>
{/block}
